<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lijincheng
  Date: 2021/5/12
  Time: 8:35 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>${uBookVo.UBookDto.bookTitle} 详情</title>
    <!-- CUSTOM STYLE -->
    <link href="/css/style.css" rel="stylesheet">
    <!-- THEME TYPO -->
    <link href="/css/themetypo.css" rel="stylesheet">
    <!-- BOOTSTRAP -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <!-- COLOR FILE -->
    <link href="/css/color.css" rel="stylesheet">
    <!-- FONT AWESOME -->
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <!-- BX SLIDER -->
    <link href="/css/jquery.bxslider.css" rel="stylesheet">

    <link href="/css/bootstrap-slider.css" rel="stylesheet">

    <link href="/css/widget.css" rel="stylesheet">

    <link href="/css/shortcode.css" rel="stylesheet">
    <!-- responsive -->
    <link href="/css/responsive.css" rel="stylesheet">
    <!-- Component -->
    <link href="/js/dl-menu/component.css" rel="stylesheet">
    <link href="/css/order/css.css" rel="stylesheet">

    <link href="${pageContext.request.contextPath}/css/search/base.css" type="text/css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .cate-a-css {
            background-color: #49576C;
            color: #F3F3F3;
        }

        .ppp p {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
<div id="loader-wrapper">
    <div id="loader"></div>

    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>

</div>
<!--WRAPPER START-->
<div class="wrapper kode-header-class-3">
    <!--HEADER START-->
    <header class="header-3">
        <div class="container">
            <div class="logo-container">
                <div class="row">
                    <div class="col-md-3">
                        <!--LOGO START-->
                        <div class="logo">
                            <a href="#"><img src="/images/logo-2.png" alt=""></a>
                        </div>
                        <!--LOGO END-->
                    </div>
                    <div class="col-md-9">
                        <div class="top-strip">
                            <div class="pull-left">
                                <p>Welcome to Library theme</p>
                            </div>
                            <div class="social-icon">

                                <li><a href="#" class="pull-left">欢迎 ${sessionScope.user.getUName()}</a></li>

                            </div>
                        </div>
                        <div class="kode-navigation">
                            <ul>
                                <li><a href="/">主页</a>
                                    <ul>
                                        <li><a href="/">主页</a></li>
                                    </ul>
                                </li>
                                        <li><a href="">图书管理</a>
                                            <ul>
                                                <li><a href="/ubook/post/index">发布图书</a></li>
                                                <li><a href="/ubook/myBooks">我的发布记录</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="">购物车</a>
                                            <ul>
                                                <li><a href="/shop/car/index">我的购物车</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="">订单管理</a>
                                            <ul>
                                                <li><a href="/order/index">所有订单</a></li>
                                                <li><a href="">待收货</a></li>
                                                <li><a href="">已完成</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="">个人中心</a>
                                            <ul>
                                                <li><a href="/user/userInfo/#caa">个人信息</a></li>
                                                <li><a href="/browse/history/list">我的浏览记录</a></li>
                                                <li><a href="/user/loginout">退出登陆</a></li>
                                            </ul>
                                        </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--HEADER END-->
    <!--BANNER START-->
    <div class="kode-inner-banner" style="background-image: url('/images/style2-blog3.png');">
        <div class="kode-page-heading">
            <h2>图书详情</h2>
            <ol class="breadcrumb">
                <li><a href="#">主页</a></li>
                <li class="active">图书详情</li>
            </ol>
        </div>
    </div>
    <!--BANNER END-->
    <div class="search-section">
        <div class="container">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#Basic" role="tab" data-toggle="tab">作者</a></li>
                <li role="presentation"><a href="#Author" role="tab" data-toggle="tab">标题</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="Basic">
                    <div class="form-container">
                        <div class="row">
                            <div class="col-md-5 col-sm-8">
                                <input type="text" id="book-name" placeholder="请输入作者名称" width="20">
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <button onclick="search_name()">搜索作者</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="Author">
                    <div class="form-container">
                        <div class="row">
                            <div class="col-md-5 col-sm-8">
                                <input type="text" id="book-title" placeholder="请输入书籍名称" width="20">
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <button onclick="search_title()">搜索标题</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--CONTENT START-->
    <!--CONTENT START-->
    <div class="kode-content padding-tb-50">
        <div class="container">
            <div class="row">
                <div class="col-md-3 sidebar">
                    <!--PRICE FILTER WIDGET START-->
                    <div class="widget widget-price-filter">
                        <h2>价格过滤</h2>
                        <b>¥ 1</b>
                        <b class="pull-right">¥ 1000</b>
                        <input id="ex2" type="text" class="span2" value="" data-slider-min="1" data-slider-max="1000"
                               data-slider-step="5" data-slider-value="[1,400]"/>
                        <a href="#" id="filter_book" class="filter">筛选</a>
                    </div>
                    <!--PRICE FILTER WIDGET END-->
                    <!--CATEGORY WIDGET START-->
                    <div class="widget widget-categories">
                        <h2>分类</h2>
                        <ul id="catea">
                            <c:forEach items="${cateList}" var="c">
                                <li><a onclick="search_cate('${c.id}')">${c.cname}</a></li>
                            </c:forEach>
                        </ul>
                    </div>
                    <!--NEW ARRIVAL WIDGET START-->
                    <div class="widget widget-new-arrival">
                        <h2>最新发布</h2>
                        <ul>
                            <c:forEach items="${newBooks}" var="nb">
                                <li>
                                    <div class="new-arrival">
                                        <div class="kode-thumb">
                                            <a href="/ubook/detail/${nb.id}"><img src="/upload/${nb.imgUrl}" alt=""></a>
                                        </div>
                                        <div class="kode-text ppp">
                                            <h3>${nb.bookTitle}</h3>
                                            <p>${nb.note}</p>
                                        </div>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                    <!--NEW ARRIVAL WIDGET END-->
                </div>
                <div class="col-md-9">
                    <div class="row" style="margin-bottom: 2%">
                        <div class="col-sm-4">
                            <div class="input-group" id="selectCate">

                            </div>
                        </div>
                    </div>
                    <div class="row" id="book">
                        <!--BOOK LISTING START-->
                        <div class="lib-book-detail">
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="kode-thumb">
                                        <img src="/upload/${img}" alt="${uBookVo.UBookDto.bookTitle}">
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <div class="kode-text">
                                        <h2>${uBookVo.UBookDto.bookTitle}</h2>
                                        <div class="product-price">
                                            <h4>¥ ${uBookVo.UBookDto.bookPrice}</h4>
                                            <p>作者 : <span class="color">${uBookVo.UBookDto.bookAuthor}</span></p>
                                        </div>
                                        <div class="book-text">
                                            <p>分类：${uBookVo.firstCategory} > ${uBookVo.secondCategory}</p>
                                            <p>类型: ${uBookVo.type}</p>
                                            <p>价格: ${uBookVo.UBookDto.bookPrice}</p>
                                            <p>数量: ${uBookVo.UBookDto.bookNum}</p>
                                        </div>
                                        <c:if test="${uBookVo.UBookDto.bookNeed == 1}">
                                            <a onclick="addCar()" class="add-to-cart">加入购物车</a>
                                            <input type="text" id="bookCode" hidden
                                                   value="${uBookVo.UBookDto.bookCode}">
                                            <a onclick="open_place_order_div()" class="add-to-cart">立即购买</a>
                                        </c:if>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="product-review-tabs">
                            <!--NAV TABS START-->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#Description "
                                                                          aria-controls="Description" role="tab"
                                                                          data-toggle="tab">描述</a></li>
                            </ul>
                            <!--NAV TABS END-->
                            <!--TAB PANEL START-->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane fade in active" id="Description">
                                    <p>${uBookVo.UBookDto.note}</p>
                                    <hr>
                                    <c:forEach items="${uBookVo.imgUrl}" var="imgU">
                                        <img src="/upload/${img}" height="300" width="200"
                                             style="margin-right: 10px;margin-bottom: 10px">
                                    </c:forEach>
                                </div>
                            </div>
                            <!--TAB PANEL END-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--CONTENT END-->
    <div class="copyrights">
        <div class="container">
            <p>Copyrights © 2015-16 KodeForest. All rights reserved</p>
            <div class="cards"><img src="/images/cards.png" alt=""></div>
        </div>
    </div>
</div>
<div class="shade">
</div>
<div class="place-order card" id="edit-name-div">
    <div class="col-xs-12 shade_colse">
        <a style="font-size: 20px;margin-right: 20px" href="javascript:close_place_order_div()">x</a>
    </div>
    <div class="nav shade_content_div" style="margin-top: -5px">
        <div class="col-xs-12 shade_from">
            <form action="" method="post">
                <input type="text" hidden id="bookCodePlace">
                <div class="col-xs-12">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default car-decrease" onclick="sub()">-</button>
                        </div>
                        <input type="text" id="book_num" class="form-control goods-count"
                               value="1">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default car-add" onclick="add()">+</button>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <input class="btn_remove" style="width: 100px" type="button"
                           onclick="javascript:close_place_order_div()"
                           value="取消"/>
                    <input type="button" style="width: 100px" class="sub_set" onclick="btn_ok_place_order()"
                           value="提交"/>
                </div>
            </form>
        </div>
    </div>
</div>
<!--WRAPPER END-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/dl-menu/modernizr.custom.js"></script>
<script src="/js/dl-menu/jquery.dlmenu.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<script src="/js/bootstrap-slider.js"></script>
<script src="/js/waypoints.min.js"></script>
<script src="/js/jquery.counterup.min.js"></script>
<script src="/js/functions.js"></script>
<script type="text/javascript" src="/js/search/jquery.select.js"></script>
<script type="text/javascript" src="/js/search/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        $(".shade").hide();
        $(".place-order").hide();
    })

    function open_place_order_div() {
        /*
                /order/place/order/
        ${uBookVo.UBookDto.bookCode}?num=1
*/
        var bookCode = $("#bookCode").val();
        $("#bookCodePlace").val(bookCode);
        $(".shade").show();
        $(".place-order").show();

    }

    function close_place_order_div() {
        $(".shade").hide();
        $(".place-order").hide();
    }

    function btn_ok_place_order() {
        var bookCode = $("#bookCodePlace").val();
        var num = $("#book_num").val();
        close_place_order_div();
        window.location.href = '/order/place/order/' + bookCode + '?num=' + num;
    }

    function add() {
        var num = $("#book_num").val();
        if (parseInt(num) >= 99) {
            return;
        }
        $("#book_num").val(parseInt(num) + 1);
    }

    function sub() {
        var num = $("#book_num").val();
        if (parseInt(num) == 1) {
            return;
        }
        $("#book_num").val(parseInt(num) - 1);
    }

    function addCar() {
        $.ajax({
            type: "POST",
            data: {"ubCode": $("#bookCode").val()},
            url: "/shop/car/add",
            success: function (data) {
                if (data == "success") {
                    alert("成功添加到购物车")
                } else {
                    alert("添加失败")
                }
            }
        });
    }
    function search_cate(id) {
        $("#catea li").find("a").click(function (e) {
            $("#catea li a").removeClass("cate-a-css");
            $(this).addClass("cate-a-css");
        });
        var cateData = '<label class="input-group-addon">分类</label>\n' +
            '<select class="form-control" id="selectCategoryId">' +
            '<option value="'+id+'">全部</option>\n';
        $.ajax({
            async: true,
            type: "GET",
            data: {"parentId": id},
            url: "/getCategory",
            success: function (data) {
                if (data.code == 0) {
                    var da = data.data;
                    for (let i = 0; i < da.length; i++) {
                        var cs = da[i];
                        cateData += '<option value="' + cs.id + '">' + cs.cname + '</option>';
                    }
                    cateData += '</select><a href="#book-name" onclick="searchFilterAndCate()" class="btn input-group-addon">筛选</a>'
                }
            }
        });
        $.ajax({
            type: "GET",
            data: {"cateId": id},
            url: "/ubook/searchCate",
            success: function (data) {
                if (data.code == 0) {
                    console.log(data.data);
                    refresh(data.data);
                    $("#selectCate").html(cateData);
                }
            }
        });
    }

    function refresh(data) {
        var c = '';
        for (let i = 0; i < data.length; i++) {
            var book = data[i];
            c += '<div class="col-md-4 col-sm-6">\n' +
                '                <div class="books-listing-4">\n' +
                '                  <div class="kode-thumb">\n' +
                '                    <img src="/upload/' + book.imgUrl + '" alt="" width="260" height="270">\n' +
                '                  </div>\n' +
                '                  <div class="kode-text">\n' +
                '                    <h3><a href="/ubook/detail/' + book.id + '">' + book.bookTitle + '</a></h3>\n' +
                '                  </div>\n' +
                '                  <div class="book-price">\n' +
                '                    <p>¥ ' + book.bookPrice + '</p>\n' +
                '                  </div>\n' +
                '                  <a onclick="addCar(\'' + book.bookCode + '\')" id="ad-car" class="add-to-cart">加入购物车</a>\n' +
                '                </div>\n' +
                '              </div>'
        }
        $("#book").html(c);
    }
    $("#filter_book").click(function () {
        var filterPrice = $("#ex2").val();
        var tex = $("#selectCate").text();
        console.log(tex==null)
        if (tex == null){
            searchFilterPrice();
        }else {
            searchFilterAndCate();
        }
    });

    function searchFilterPrice(){
        var filterPrice = $("#ex2").val();
        var cateId =  $("#selectCategoryId").val();
        $.ajax({
            async:true,
            type:"GET",
            data:{"cateId":null,"price":filterPrice},
            url:"/ubook/queryFilter",
            success:function (data){
                if(data.code == 0){
                    console.log(data.data);
                    refresh(data.data);
                }
            }
        });
    }
    function searchFilterAndCate(){
        var filterPrice = $("#ex2").val();
        var cateId =  $("#selectCategoryId").val();
        $.ajax({
            async:true,
            type:"GET",
            data:{"cateId":cateId,"price":filterPrice},
            url:"/ubook/queryFilter",
            success:function (data){
                if(data.code == 0){
                    console.log(data.data);
                    refresh(data.data);
                }
            }
        });
    }

    function search_name() {
        var name = $("#book-name").val();
        $.ajax({
            type: "GET",
            data: {"bookAuthor": name},
            url: "/ubook/searchName",
            success: function (data) {
                if (data.code == 0) {
                    console.log(data.data);
                    refresh(data.data);
                }
            }
        });
    }

    function search_title() {
        var name = $("#book-title").val();
        $.ajax({
            type: "GET",
            data: {"bookTitle": name},
            url: "/ubook/searchTitle",
            success: function (data) {
                if (data.code == 0) {
                    console.log(data.data);
                    refresh(data.data);
                }
            }
        });
    }
</script>
</body>
</html>
